import { Text, StyleSheet, View, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native'
import React, { useState, useEffect, useCallback } from 'react'
import httpApi from "../../api"
import { Toast } from '@pingtou/rn-vant';
import { pTx } from "../../utils/dimensions"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Realm from "realm"
const GroupName = (props) => {
    const realm = useRealm();

    const [group] = useState(props.route.params)
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const groupInfo = useQuery(schemaName.GroupInfo, Info => {
        return Info.filtered(`Id == ${group.G} and UserId == ${userInfo.Id}`);
    })[0];
    const groupList = useQuery(schemaName.GroupList, list => {
        return list.filtered(`G == ${group.G} and UserId == ${userInfo.Id}`);
    })[0];

    const [loading, setLoading] = useState(false)
    const [groupName, setGroupName] = useState(groupInfo.GroupName)

    const updateGroupInfo = async () => {
        try {
            setLoading(true)
            const res = await httpApi.updateGroupInfo({ groupId: group.G, groupName })
            if (res.code == 20) {
                realm.write(() => {
                    groupInfo.GroupName = groupName
                    groupList.R = groupName
                })
                props.navigation.goBack()
            } else {
                Toast(res.message)
            }
        } catch (error) {
        }
        setLoading(false)
    }
    return (
        <View style={styles.page}>
            <Text style={styles.title}>修改群名称</Text>
            <TextInput
                type={'text'}
                maxLength={15}
                value={groupName}
                style={styles.groupName}
                onChangeText={value => setGroupName(value)}
            >
            </TextInput>
            <View style={styles.button}>
                <TouchableOpacity disabled={loading || !groupName} onPress={() => updateGroupInfo()}>
                    <Text style={[styles.headText,]}>
                        <>
                            {loading ? <ActivityIndicator /> : "确认"}
                        </>
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

export default GroupName




const styles = StyleSheet.create({
    page: {
        flex: 1,
        paddingHorizontal: pTx(18),
        paddingVertical: pTx(30),
        backgroundColor: "#fff"
    },
    title: {
        textAlign: "center",
        fontSize: pTx(18),
        color: "#333"

    },
    groupName: {
        marginTop: pTx(20),
        borderTopWidth: 1,
        borderBottomWidth: 1,
        textAlign: "center",
        borderColor: "rgba(0,0,0,0.1)",
    },
    button: {
        marginTop: pTx(40),
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center"
    },
    headText: {
        width: pTx(180),
        color: "#fff",
        fontSize: pTx(16),
        paddingVertical: pTx(13),
        textAlign: "center",
        backgroundColor: "rgba(6, 193, 97, 1)",
        borderRadius: pTx(12),
    }
})